<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:ht="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>some fun</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- basic styles -->

		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

		<!--[if IE 7]>
		<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->

		<!-- page specific plugin styles -->
		<!-- ace styles -->

		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />

		<!--[if lte IE 8]>
		<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>
		<th:block th:include="/template/ace/navbar :: navbar"></th:block>
		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>
			<div class="main-container-inner">
				<th:block th:include="/template/ace/menu :: menu"></th:block>

				<div class="main-content">
					<th:block th:include="/template/ace/breadcrumbs :: breadcrumbs(#{B1001},#{B2001})"></th:block>
					<!--表格-->
					<div class="page-content">
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12">
										<div class="table-header">
											<form name="form1" method="post" action="" onsubmit="return false" style="background-color:#307ecc; margin-left:10px">
												<!--  期間：<input id="Text1" type="text" style="width:200px"/>～<input id="Text2" type="text" style="width:200px"/>-->
												<span th:text="#{L20011}"></span>
												<input type="text" list="uname1"/>
<!--												<datalist id="uname1" th:each="item,items:${slist}">-->
<!--													<option th:text="">日立プロジェクト</option>-->
<!--												</datalist>-->

												<span th:text="#{L20012}"></span>
												<input type="text" list="uname2"/>
												<datalist id="uname2">
													<option>張さん</option>
													<option>李さん</option>
												</datalist>

												<span th:text="#{L20013}"></span>
												<input type="text" list="uname3"/>
												<datalist id="uname3">
													<option>延期未支払_一般</option>
													<option>延期未支払_重大</option>
													<option>期限近い</option>
													<option>延期支払済</option>
													<option>支払中</option>
													<option>支払済</option>
													<option>当期支払未開始</option>
													<option>チャージオフ</option>
												</datalist>
												&nbsp;&nbsp;<input type="submit" th:value="#{B1001}" class="btn btn-info">
											</form>
										</div>
										<div class="table-header">
											<span th:text="#{T1001}"></span>
										</div>

										<div class="table-responsive">
											<table id="sample-table-2" class="table table-striped table-bordered table-hover">
												<thead>
													<tr>
														<th class="center">
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
														</th>
														<td><span th:text="#{TB1001}"></span></td>
														<td><span th:text="#{TB1002}"></span></td>
														<td><span th:text="#{TB1003}"></span></td>
														<td><span th:text="#{TB1004}"></span></td>
														<td><span th:text="#{TB1005}"></span></td>
														<td><span th:text="#{TB1006}"></span></td>
														<td><span th:text="#{TB1007}"></span></td>
														<td><span th:text="#{TB1008}"></span></td>
														<td><span th:text="#{TB1009}"></span></td>
														<td><span th:text="#{TB1010}"></span></td>
														<td><span th:text="#{TB1011}"></span></td>
													</tr>
												</thead>

												<tbody>

													<tr>
														<td class="center">
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
														</td>

														<td>河豚</td>
														<td>河豚</td>
														<td>河豚</td>
														<td>河豚</td>
														<td>河豚</td>
														<td>河豚</td>
														<td>河豚</td>
														<td>河豚</td>
														<td>河豚</td>

														<td class="hidden-480">
															<span class="label label-sm label-warning">Expiring</span>
														</td>

														<td>
															<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
																<a class="blue" href="#">
																	<i class="icon-zoom-in bigger-130"></i>
																</a>
															</div>
														</td>
													</tr>


												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div><!-- /.main-content -->
			</div><!-- /.main-container-inner -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="icon-double-angle-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->




		<!-- basic scripts -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>
		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>

		<!-- page specific plugin scripts -->

		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/jquery.dataTables.bootstrap.js"></script>

		<!-- ace scripts -->

		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->

		<script type="text/javascript">
			// jQuery(function($) {
			// 	var oTable1 = $('#sample-table-2').dataTable( {
			// 		"aoColumns": [
			// 			{ "bSortable": false },
			// 			null, null,null, null, null,
			// 			{ "bSortable": false }
			// 		] } );
			//
			//
			// 	$('table th input:checkbox').on('click' , function(){
			// 		var that = this;
			// 		$(this).closest('table').find('tr > td:first-child input:checkbox')
			// 				.each(function(){
			// 					this.checked = that.checked;
			// 					$(this).closest('tr').toggleClass('selected');
			// 				});
			//
			// 	});
			//
			//
			// 	$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
			// 	function tooltip_placement(context, source) {
			// 		var $source = $(source);
			// 		var $parent = $source.closest('table')
			// 		var off1 = $parent.offset();
			// 		var w1 = $parent.width();
			//
			// 		var off2 = $source.offset();
			// 		var w2 = $source.width();
			//
			// 		if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
			// 		return 'left';
			// 	}
			// })
		</script>

</body>
</html>
